<template>
  <div class="header">
    <index-header 
      :title="title" 
      title1="天鹿市场" 
      title2="天鹿的SuperStore" 
      :ifTitleClick="handleTitleClick"
      :handleChange="handleChange" 
      :titleBgColor="currentTypes?'#32aefd':''" 
      placeholder="搜索天鹿商品关键词"
      isShowTab 
      :hotWord="hotWords"
      :selectedDefault="selectedTab" 
      :searchEvent="handleSearch"
    >
      <template #other>
        <div class="vipBlock">
          <div class="companyVip">
            <i class="iconfont icon-diamond" />
            企业VIP
          </div>
          <div class="personalVip">
            <i class="iconfont icon-diamond" />
            个人VIP
          </div>
        </div>
      </template>
    </index-header>
    <div class="main">
      <div class="main-left" :style="{paddingTop: '10px'}">
        <div class="main-left-top">
          <Breadcrumb :breadcrumb="breadcrumb" />
          <span :style="{whiteSpace: 'nowrap'}" class="span1">已选: </span>
          <transition-group name="searchList" tag="div" class="search">
            <div class="searchListItem" v-for="item in searchList" :key="item">
              {{item}}
              <span class="delete" @click="handleDeleteSearch(item)">X</span>
            </div>
          </transition-group>
        </div>
        <div class="main-left-tabBar">
          <GoodsDetailBar :currentTypes="currentTypes" @Search="handleShowSearch"/>
        </div>
        
        <div class="main-left-main" v-if="!showSearch">
          <!-- 普通的展示 -->
          <template v-for="(value,keys) in goodsDatas" >
            <ShowContain :title="typesMap[keys]" :more="!currentTypes" v-if="value.length !== 0" :key="keys" :moreClick="handleMore">
              <!-- 显示4个 -->
              <template v-if="!currentTypes">
                <Goods v-for="(item,index) in value.slice(0,4)" :key="index" :goods="item" />
              </template>
              <!-- 显示多个 -->
              <template v-else>
                <Goods v-for="(item,index) in value" :key="index" :goods="item" />
              </template>
            </ShowContain>
          </template>
        </div>
        <div class="main-left-main" v-else>
          <!-- 当使用搜索框时展示的数据 -->
          <template v-for="(value,keys) in searchData">
            <ShowContain :title="keys" :key="keys"  v-if="value.length !== 0">
              <Goods v-for="(item,index) in value" :key="index" :goods="item"/>
            </ShowContain>
             <ShowContain :title="keys" :key="keys" v-else >
              <div class="none">暂无数据</div>
            </ShowContain>
          </template>
        </div>
        <div class="main-left-pagination" v-if="selectedTab || showSearch || selectedTab === 0">
          <Pagination :pagination="pagination" :numChange="handlePaginate" :reload="reload"/>
        </div>
      </div>
      <div class="main-right">
        <ShowContain :title="typesMap[keys]+'推荐'" v-for="(value,keys) in whichRecommendDatas" :key="keys">
          <Goods v-for="(item,index) in value" :key="index" :goods="item" />
        </ShowContain>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import GoodsDetailBar from './GoodsDetailBar';
import IndexHeader from '@/components/IndexHeader';
import Breadcrumb from '@/components/Breadcrumb';
import ShowContain from '@/components/ShowContain';
import Pagination from '@/components/Pagination';
import Goods from '@/components/Goods';
export default {
  components: {
    IndexHeader,
    Breadcrumb,
    GoodsDetailBar,
    ShowContain,
    Goods,
    Pagination
  },
  computed: {
    ...mapState({
      searchList: state => state.index.searchList,
      hotWords: state => state.index.hotWords,
      goodsDatas: state => state.index.goodsDatas,
      searchData: state => state.index.searchData,
      pagination: state => state.index.pagination,
      reload: state => state.index.reload,
      recommendDatas: state => state.index.recommendDatas,
    }),
    // fourGoodsDatas(){
    //   let arr = {
    //     template: [],
    //     component: [],
    //     pictrue: [],
    //     icon: [],
    //     sdk: [],
    //   };
    //   Object.keys(this.goodsDatas).forEach(key => {
    //    arr[key] =  [...this.goodsDatas[key].slice(0,4)];
    //   });
    //   return arr;
    // },
    whichRecommendDatas(){
      switch(this.currentTypes){
        case '':
          return this.recommendDatas;
        case '1':
          return { template: this.recommendDatas.template };
        case '2':
          return { component: this.recommendDatas.component };
        case '3':
          return { pictrue: this.recommendDatas.pictrue };
        case '4':
          return { icon: this.recommendDatas.icon };
        case '5':
          return { sdk: this.recommendDatas.sdk };
        default: return null;
      }
    }
  },
  data () {
    return {
      title: '天鹿市场分类',      //分类条左边的XX市场分类
      breadcrumb: [
        { title: '全部分类', to: '' },
        { title: '天鹿市场', to: '' }
      ],  //面包屑
      currentTypes: '',         //当前是什么分类eg: '':天鹿, '1': 模板 '2'.....
      typesMap: {               //给goodsDatas做映射而已
        template: '模板',
        component: '组件',
        pictrue: '图片',
        icon: '图标',
        sdk: 'SDK'
      },
      showSearch: false,
      selectedTab: false,
      currentContent: ''
    }
  },
  methods: {
    ...mapMutations(['reloadPagination','deleteGoodsDetail','saveGoodsDetail']),
    ...mapActions(['fetchIndexGoods','fetchGoodsByType', 'fetchHotword', 'fetchSearchGoods',]),
    //Tabs选择触发的函数 watch监听currentTypes
    handleChange (which, currentTypes) {
      this.currentTypes = currentTypes !== '' ? `${currentTypes + 1}` : ''; //控制标题条的颜色
      this.selectedTab = currentTypes; //选择tab位 ''为没有 0开始为模板 
      this.title = `${which}市场分类`;   // 标题条的字样
      this.breadcrumb.splice(1, 1, { title: `${which}市场`, to: '' }); //面包屑
      this.showSearch = currentTypes === '' ? true : false; //是否显示搜索到的内容
    },
    // //搜索框
    handleSearch(content){
      this.currentContent = content;
      if(!content.replace(' ','') || !content){
        this.showSearch = false;
      }else{
        this.fetchSearchGoods({ search_content: content, pageNum: 1, pageSize: this.pagination.pageSize });
        this.showSearch = true;
        this.handleChange('天鹿','');
      }
    },
    //点击更多页面变化事件 无关数据
    handleMore (type) {
      let currentTypes = null;
      switch (type) {
        case '模板':
          currentTypes = 0;
          break;
        case '组件':
          currentTypes = 1;
          break;
        case '图片':
          currentTypes = 2;
          break;
        case '图标':
          currentTypes = 3;
          break;
        case 'SDK':
          currentTypes = 4;
          break;
        default: currentTypes = null;
      }
      this.handleChange(type, currentTypes);
      this.selectedTab = currentTypes;
    },
    handleTitleClick(){
      this.fetchIndexGoods();
    },
    handlePaginate(num){
      if(!this.showSearch){
        this.fetchGoodsByType({ 
            type_id: Number(this.currentTypes),
            pageNum: num,
            pageSize: this.pagination.pageSize
        });
      }else{
        this.reloadPagination(false);
        this.fetchSearchGoods({
          search_content: this.currentContent, 
          pageNum: num, 
          pageSize: this.pagination.pageSize
        });
      }
    },
    //二类搜索 让页面显示相当于搜索的内容
    handleShowSearch(showSearch){
      this.showSearch = showSearch;
    },
    //已选X事件
    handleDeleteSearch (selectedItem) {
      let newList = [];
      this.searchList.forEach(item => {
        if (selectedItem !== item) {
          newList.push(item);
        }
      });
      this.saveGoodsDetail(newList);
      this.deleteGoodsDetail(selectedItem);
      this.handleShowSearch(this.searchList.length !== 0);
    },
  },
  watch: {
    currentTypes (n, o) {
      if(n!==o){
        this.reloadPagination(false);
        this.fetchGoodsByType({ 
          type_id: Number(n), 
          pageNum: 1,
          pageSize: this.pagination.pageSize
        });
      }
    },
    searchList: {
      handler(newV, oldV){
        console.log(newV,'newV')
        if(newV.length !== 0){
          this.reloadPagination(false);
        }else{
          this.reloadPagination(true);
        }
      },
      deep: true
    }
  },
}
</script>

<style lang="scss" src='./index.scss' scoped />